<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.fillStyle = '#ff0000'

      // 向 x轴 和 y轴 平移 200px
      ctx.translate(200, 200)

      // 在 (0,0) 坐标点绘制一个宽：200   高：100 的矩形
      ctx.fillRect(0, 0, 200, 100)
    </script>
  </body>
</html>
 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      for (let i = 0; i < 9; i++) {
        ctx.fillStyle = `#${i}${i}${i}`

        // 旋转弧度设置，角度和弧度的转换公式：1° = Math.PI / 180
        ctx.rotate((i * 2 * Math.PI) / 180)

        // 在 (0,0) 坐标点绘制一个宽：200  高 200 的矩形
        ctx.fillRect(100, 0, 200, 100)
      }
    </script>
  </body>
</html>
  -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      for (let i = 0; i < 9; i++) {
        ctx.fillStyle = `#${i}${i}${i}`

        ctx.beginPath()
        ctx.scale(2 / i, 2 / i)

        // 绘制圆
        ctx.arc(250, 250, 50, 0, (360 * Math.PI) / 180)
        ctx.fill()
      }
    </script>
  </body>
</html>
-->
<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.fillStyle = 'gray'
      ctx.fillRect(10, 10, 200, 100)

      // 保存状态
      ctx.save()
      ctx.fillStyle = 'orange'
      ctx.fillRect(10, 150, 200, 100)

      // 恢复上次保存的状态
      ctx.restore()
      ctx.fillRect(10, 300, 200, 200)
    </script>
  </body>
</html>

 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.fillStyle = '#ccc'

      let num = 0
      setInterval(() => {
        num += 1
        if (num <= 400) {
          ctx.fillRect(num, 0, 100, 100)
        }
      })
    </script>
  </body>
</html>
  -->
<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.fillStyle = '#ccc'
      const width = canvas.width
      const height = canvas.height

      let num = 0
      setInterval(() => {
        num += 1
        if (num <= 400) {
          ctx.clearRect(0, 0, width, height)
          ctx.fillRect(num, 0, 100, 100)
        }
      })
    </script>
  </body>
</html>
 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // globalCompositeOperration 属性设置或者返回如何将一个源（新的）图像绘制到目标（已有的）的图像上
      // 这里主要是为了让飞机压在运行轨迹上
      ctx.globalCompositeOperation = 'destination-over'

      const width = canvas.width
      const height = canvas.height

      let num = 0
      ctx.strokeStyle = '#ccc'
      const img = new Image()

      img.src = './feiji.png'
      img.onload = () => {
        requestAnimationFrame(planeRun)
      }

      function planeRun() {
        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 保存画布状态
        ctx.save()

        // 把原心移到画布中间
        ctx.translate(250, 250)

        // 绘制飞机和飞机动画
        num += 0.01
        ctx.rotate(-num)
        ctx.translate(0, 200)
        ctx.drawImage(img, -20, -18, 40, 40)

        // 恢复状态
        ctx.restore()

        // 飞机运行的轨迹
        ctx.beginPath()
        ctx.arc(250, 250, 200, 0, Math.PI * 2, false)
        ctx.stroke()

        // 执行完以后继续调用
        requestAnimationFrame(planeRun)
      }
    </script>
  </body>
</html>
  -->

<!-- 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 填充颜色
      ctx.fillStyle = 'orange'

      // x轴 和 y轴 都移动了 100px
      ctx.transform(1, 0, 0, 1, 100, 100)

      ctx.fillRect(0, 0, 200, 200)
    </script>
  </body>
</html>
   -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 填充颜色
      ctx.fillStyle = 'orange'

      // x轴 和 y轴 都放大 1.5 倍
      ctx.transform(1.5, 0, 0, 1.5, 0, 0)
      ctx.fillRect(0, 0, 200, 200)
    </script>
  </body>
</html>
    -->

<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 填充颜色
      ctx.fillStyle = 'orange'

      // Y轴 逐渐拉伸，得到上图右边状态
      ctx.transform(1, Math.PI / 20, 0, 1, 0, 0)

      ctx.fillRect(150, 100, 200, 200)
    </script>
  </body>
</html>

     -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      // 填充颜色
      ctx.fillStyle = 'orange'

      // 旋转 30°
      const deg = Math.PI / 180
      const c3 = Math.cos(30 * deg)
      const s3 = Math.sin(30 * deg)
      console.log(c3, s3, deg)

      ctx.transform(c3, s3, -s3, c3, 0, 0)
      ctx.fillRect(0, 0, 200, 200)
    </script>
  </body>
</html>
